<script lang="ts">

enum BookState{
    Temp=0,
    Collecting=1,
    Collected=2,
    Downloading=3,
    Downloaded=4
}

import Loading from './loading.vue'
export default {

    data() {
        return {
            book:'',
            is_loading:true,
        }
    },
    components:{
        loading:Loading,
    },
    methods: {
        async like_book(book_id:number,ele:HTMLElement){
            ele.toggleAttribute('disabled')
            const api='http://localhost:9999/like?book_id='
            const url=api+book_id
            console.log('Request for liking book:'+url)
            let res=await fetch(url)
            switch(res.status){
                case 200:
                    alert('收藏漫画成功！\n')
                    let data=await res.json()
                    console.log('Accpet book model after liking it')
                    console.dir(data)
                    this.collection.get(book_id).state=data.state
                    ele.toggleAttribute('disabled')
                    break
                case 400:
                    alert('请等待当前漫画添加完成！')
                    break
                case 500:
                    let error=await res.text()
                    alert('收藏漫画失败，原因：\n'+error)
                    ele.toggleAttribute('disabled')
            }
 
        },
        download_book(book_id) {
            const api = 'http://localhost:9999/download?book_id='
            const url=api+book_id
            fetch(url)
            .then(res=>{
                if (res.status==200) {
                    console.log('Reqest downloading successfully:'+url)
                    console.dir(res)
                }
            })
            .then(data=>console.log(data))
        },

    },
    emits: [],
    props: {
        collection: Map,
    },
    computed:{
        books(){
            return this.collection.values()
        }
    },
    mounted(){
    },

}
</script>

<template>
    <div class="shelf">
        <loading v-if="book.length>0"></loading>
        <div class="book-card" v-for="book in books" :key="book.id">
            <!-- <img :src="book.cover_url" :alt="book.title" class="book-cover"> -->
            <img src="media/default.jpg" :alt="book.title" class="book-cover" />
            <div class="book-panel">
                <div class="book-info">
                    <h1 class="book-title">{{ book.title }}</h1>
                    <div class="book-chapter">
                        <span class="book-chapter-label">章节数量</span>
                        <span class="book-chapter-count">{{ book.chapter_count }}</span>
                    </div>
                    <!-- <div v-if="book.state>0" class="book-progress">
                        <span class="progress-label">下载进度</span>
                        <span class="progress-bar" :style="{ width: book.progress * 100 + '%' }"></span>
                        <span class="progress-value">{{ book.progress * 100 + '%' }}</span>
                    </div> -->
                </div>
                <div class="book-operation">
                    <a v-if="book.state==0" class="btn" title="收藏漫画" @click="like_book(book.id,$event.target )">收藏</a>
                    <a v-else-if="book.state<4" class="btn" title="下载漫画" @click="download_book(book.id)">下载</a>
                    <a v-else-if="book.state==4" class="btn" title="更新漫画">更新</a>
                    <a v-if="book.state > 2" class="btn" title="开始浏览漫画">浏览</a>
                    <a class="btn" title="查看漫画详情" :href="book.url" target="_blank">详情</a>
                    <a v-if="book.state > 0" class="btn danger" title="从书架中移除">删除</a>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.shelf {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    overflow-y: auto;
    width: 100%;
    height:100%
}
.book-card {
    flex-basis: 300px;
    flex-shrink: 0;
    flex-grow: 0;
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-columns: 200px 1fr;
    margin: 10px;
    position: relative;
    text-shadow: 1px 1px 4px cyan;

    img {
        display: block;
        width: 200px;
        height: 300px;
        background-color: cadetblue;
    }
}
.book-title {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 200px;
    text-align: center;
}
.book-panel {
    display: grid;
    grid-template-rows: 1fr, 1fr;
}
.book-chapter {
    display: grid;
    grid-template-rows: 1fr, 1fr;
    span {
        display: block;
        width: 100%;
        text-align: center;
    }
}
.book-chapter-label {
    font-size: 1.4rem;
    font-weight: 600;
}
.book-chapter-count {
    font-size: 1.5rem;
    font-weight: 900;
}
.book-operation {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}


</style>
